<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册会员</title>
    <link rel="stylesheet" href="css/注册.css" />
  </head>
  <body>
    <div class="formarea">
      <h1>欢迎注册会员</h1>
      <form action="#" method="get">
        <div class="formgroup">
          <label for="phonenumber">手机号码：</label>
          <input
            class="formcontrol"
            type="text"
            name="phonenumber"
            id="phonenumber"
            placeholder="11位手机号"
          />
          <span class="red">必填</span>
        </div>
        <div class="formgroup">
          <label for="password">创建密码：</label>
          <input
            class="formcontrol"
            type="password"
            name="password"
            id="password"
            placeholder="8位密码"
          />
          <span class="red">必填</span>
        </div>
        <div class="formgroup">
          <label for="email">注册邮箱：</label>
          <input
            class="formcontrol"
            type="text"
            name="email"
            id="email"
            placeholder="例如：wustzz@sina.com"
          />
          <span class="red">必填</span>
        </div>
        <div class="formgroup">
          <label for="vcode">验证码：</label>
          <input class="formcontrol" type="text" name="sc" id="sc" />
          <div class="capcha">
            <span id="capcha">4位验证码</span>
            <img src="images/arrow_03.png" id="change_capcha" />
          </div>
          <script>
            let codeStr =
              "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            //验证码长度
            let length = 4;
            let capcha = document.getElementById("capcha");
            let change_capcha = document.getElementById("change_capcha");
            // 用来生成一个[n,m]随机整数
            function getRandom(n, m) {
              return parseInt(Math.random() * (m - n + 1) + n);
            }
            // 将随机生成的整数下标对应的字母放入span中
            function getCode() {
              let str = "";
              // 验证码有几位就循环几次
              for (let i = 0; i < length; i++) {
                let index = getRandom(0, 61);
                str += codeStr.charAt(index);
              }
              capcha.innerHTML = str;
            }
            // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
            getCode();
            // 点击刷新验证码
            capcha.addEventListener("click", getCode);
            change_capcha.addEventListener("click", getCode);
          </script>
        </div>
        <div class="formgroup">
          <label>性别：</label>
          <label class="sex"
            ><input type="radio" name="sex" value="male" />男</label
          >
          <label class="sex"
            ><input type="radio" name="sex" value="female" />女</label
          >
        </div>
        <div class="formgroup">
          <label>生日：</label>
          <input class="formcontrol" type="date" placeholder="年/月/日" />
        </div>
        <div class="formgroup">
          <label for="age">年龄：</label>
          <input class="formcontrol" type="text" name="age" id="age" />
        </div>
        <div class="formgroup">
          <label>籍贯：</label>
          <select class="province" name="province" id="province">
            <option value="hubei" selected="selected">湖北省</option>
            <option value="sichuan">四川省</option>
          </select>
          <select class="city" name="city" id="city">
            <option value="0">武汉</option>
            <option value="1">成都</option>
          </select>
        </div>
        <div class="formgroup">
          <label>个人学历：</label>
          <select class="education" name="education" id="education">
            <option value="0">本科</option>
            <option value="1">研究生</option>
          </select>
        </div>
        <div class="formgroup">
          <label>月薪：</label>
          <input
            class="money"
            type="range"
            id="money"
            name="money"
            min="0.0"
            max="10000.0"
            value="5000.0"
          />
          <span id="msg"></span>
          <script>
            var msg = document.getElementById("msg");
            window.onload = function () {
              msg.innerHTML = document.getElementById("money").value;
            };
            document.getElementById("money").onchange = function () {
              msg.innerHTML = this.value;
            };
          </script>
        </div>
        <div class="formgroup">
          <label>个人爱好：</label>
          <label class="hobit"
            ><input type="checkbox" name="like" value="sing" />唱歌</label
          >
          <label class="hobit"
            ><input type="checkbox" name="like" value="run" />跑步</label
          >
          <label class="hobit"
            ><input type="checkbox" name="like" value="swim" />游泳</label
          >
        </div>
        <div class="formgroup">
          <label>个人照片：</label>
          <input id="test-image-file" type="file" name="test" />
          <div class="black" id="test-image-preview"></div>
          <script>
            var fileInput = document.getElementById("test-image-file");

            var preview = document.getElementById("test-image-preview");
            fileInput.addEventListener("change", function () {
              // 监听change事件
              preview.style.backgroundImage = ""; // 清除背景图片
              if (!fileInput.value) {
                return;
              }
              var file = fileInput.files[0]; // 获取File引用
              // 获取File信息:

              if (
                file.type !== "image/jpeg" &&
                file.type !== "image/png" &&
                file.type !== "image/gif"
              ) {
                alert("不是有效的图片文件!");
                return;
              }
              var reader = new FileReader(); // 读取文件
              reader.onload = function (e) {
                // 发起一个异步操作来读取文件内容
                var data = e.target.result; // data串形如： '...(base64编码)...'
                preview.style.height = 200 + "px";
                preview.style.backgroundImage = "url(" + data + ")";
              };
              reader.readAsDataURL(file); // 以DataURL的形式读取文件
            });
          </script>
        </div>
        <div class="formgroup int">
          <label class="intro">个人简介：</label>
          <textarea name="intro" id="intro" cols="30" rows="10"></textarea>
        </div>
        <div class="formgroup">
          <button type="submit">提交</button>
          <button type="reset">重填</button>
        </div>
      </form>
    </div>
  </body>
</html>
